<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例</title>
  <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">点击切换天气</button>
  </div>
</body>
<script type="text/javascript">
  var vm = new Vue({
    //data的函数式写法
    data(){
      return {
        isHot: true
      }
    },
    computed:{
      info(){
        return this.isHot ?'凉爽':'炎热'
      }
    },
    methods:{
      changeWeather:function (){
          this.isHot = !this.isHot
      }
    }
  })

  vm.$mount('#root')
</script>
</html>